<template>
  <div style="padding-bottom:60px;">
    <div class="label">当前地址</div>
    <div class="zan-cell zan-cell--access" style="margin-bottom:40rpx;">
        <img class="icon" src="/static/icon-location_1.png" alt="">
        <div @click="selectAddress" class="zan-cell__bd">{{formateAddress||'选择地址'}}</div>
        <div @click="selectAddress" class="zan-cell__ft"></div>
    </div>

    <!-- <div class="label">菜单详情</div> -->
    <div
      class="flex-row"
      style="position:relative;zoom:.8;margin-left:40rpx;width:85%;"
      v-for="(item,index) in menu"
      :key="index"
      v-if="item.num">
      <o-card
        :price="'￥ '+item.price"
        :desc="'折扣'+item.discount"
        :count="item.num"
        :content="item.name"
        :thumb="item.image||'https://ws3.sinaimg.cn/large/006tNbRwgy1fysgjwfbkrj30ev0h1abw.jpg'">.
      </o-card>
    </div>
    <!-- <div class="label">留言</div> -->
      <div class="flex-column flex-middle" style="margin:40rpx 0;">
        <img class="icon" style="margin:0 0 0 40rpx;" src="/static/icon-talk.png" alt="">
        <input
          style="font-size:13px;color:#222;margin-left:20px;background:1px solid rgba(0,0,0,.1);"
            :value="userSpeak"
            @change="userSpeakChange"
            clearable
            placeholder="给商家留言 ~"
          />
      </div>
       <submit-bar
        :price="sum"
        buttontext="提交订单"
        :loading="isPaying"
       :disabled="sum<=0 ||isPaying"
        @submit="gotoPay">.</submit-bar>

  </div>
</template>

<script>
let AV = require('leancloud-storage/live-query')
import OCard from '@/components/oui/card.vue'
import SubmitBar from '@/components/oui/submitBar.vue'

export default {
  data() {
    return {
      userSpeak: '',
      isPaying: false,
      // key: value,
      address: null
    };
  },
  components: {OCard, SubmitBar},
  computed: {
    menu() {
      return this.$store.state.menu;
    },
    sum() {
      let sum = 0;
      this.menu.forEach(item => {
        let price = isNaN(parseFloat(item.price)) ? 100 :(parseFloat(item.price)-parseFloat(item.discount));
        sum += Math.round(parseFloat(item.num) * price * 100) / 100;
      });
      return sum;
    },
    formateAddress() {
      return this.address && `${this.address.name}  ${this.address.address[0].join(' ')} ${this.address.address[1]}`
    }
  },
  methods: {
    userSpeakChange(e) {
      this.userSpeak = e.mp.detail.value
    },
    selectAddress() {
      wx.navigateTo({
        url: "/pages/mine/address/main"
      });
    },
    async gotoPay() {
      this.isPaying = true
      let _this = this
      if (!this.address) return this.$showToast({icon:'none',title:'请选择地址'})
      let res = await AV.Cloud.run('order',{
        menu: this.menu,address: this.address,userSpeak: this.userSpeak
      }).catch(err=>{
        this.isPaying = false
        console.log(err)
      })
      let { timeStamp,nonceStr,signType,paySign} = res
      
      wx.requestPayment({
        timeStamp,
        nonceStr,
        package: res.package,
        signType,
        paySign,
        success(res) { 
          console.log(res);
          _this.isPaying = false
          _this.$store.commit('setMenu', [])
          wx.redirectTo({
            url: '/pages/mine/order/main'
          })
        },
        fail(res) { 
          console.log(res);
          _this.isPaying = false
          
        }
      })
      
    }
  },
  onShow() {
    let address = (AV.User.current()).get('address').filter(item=>item.isActive)
    if (address) {
      this.address = address[0]
    }
  },
  onUnload() {
    this.isPaying = false
  }
};
</script>

<style scoped>
.label {
  font-size: 14px;
  color: #555;
  font-weight: 900;
  margin: 20px 20px 10px;
}
.icon {
  width: 16px;height: 16px;margin-right: 10px;
}
</style>